<template>
	<view class="banner">
		<uni-swiper-dot 
		:info="info" 
		:current="current" 
		field="content" 
		:mode="mode"
		:dotsStyles="dotsStyle"
		>
			<!-- 
			:indicator-dots="indicatorDots"
			 indicator-color="orange"
			 indicator-active-color="red"
			 -->
			<swiper 
			:autoplay="autoplay" 
			:interval="interval"
			:duration="duration"
			class="swiper" 
			circular 
			@change="change"
			>
				<swiper-item v-for="val in info">
					<view class="swiper-item">
						<image :src="val"></image>
					</view>
				</swiper-item>
				<!-- <swiper-item>
					<view class="swiper-item">
						<image src="../../static/goods2.jpg"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/goods3.jpg"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/goods4.png"></image>
					</view>
				</swiper-item> -->
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				//...
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				//导航插件变量
				current: 0,
			    mode: 'dot',//default,nav,dot,round,indexes
				// info:[1,2,3,4],
				info:[
					'../../static/goods1.jpg',
					'../../static/goods2.jpg',
					'../../static/goods3.jpg',
					'../../static/goods4.png'
				],
				dotsStyle:{
					border:"none",//默认去掉边框
					selectedBorder:"2px rgba(245, 250, 254, .5) solid",
					selectedBackgroundColor:"rgba(255, 255, 255, .5)",
					backgroundColor:"rgba(255, 255, 255, .3)",
					bottom:40
				}
			}
		},
		methods: {
			change(e) {
				//获取到当前是第几个swiper-item
				this.current = e.detail.current;
			}
		}
	}
</script>

<style lang="less">
	.banner{
		.swiper{
			height: 460rpx;
			
			.swiper-item{
				image{
					// percent w100p
					width: 100%;
				}
			}
		}
	}
</style>
